import React, { useEffect, useState } from 'react';
import styles from './looktest.less';
import '../../../../src/global.css'
import { Select, Button, Form } from 'antd';
import { useDispatch, useHistory, useSelector } from 'umi';
import { QuestionModulState } from '@/models/question'
const { Option } = Select;
let Looktest: React.FC = function () {
  let history = useHistory();
  const dispatch = useDispatch();
  const [sss, setsss] = useState("")
  useEffect(() => {
    //获取课程类型
    dispatch({
      type: 'question/getSubject'
    })
    //获取考试类型
    dispatch({
      type: 'question/getExamType'
    })
    //获取试题类型
    dispatch({
      type: 'question/getQuestionsType'
    })
    //获取查看试题类型
    dispatch({
      type: 'question/getquestions'
    })
  }, [])
  //拿课程类型数据
  const { subject, questionsType, examType, getquestions } = useSelector((model: { question: QuestionModulState }) => model.question)
  function handleChange(value: any) {
  }

  const onFinish = (values: any) => {
    dispatch({
      type: "question/getquestionscondition",
      payload: {
        questions_type_id: values.timutype,
        subject_id: sss,
        exam_id: values.testtype
      }
    })
  };
  const btn = (type: string) => {
    setsss(type)
  }
  const all = () => {
    dispatch({
      type: 'question/getquestions'
    })
  }
  return (
    <div className={styles.title}>
      <div className={styles.looktesthead}>
        <h1>查看试题</h1>
      </div>
      <div className={styles.looktestmain}>
        <div className={styles.aaaa}>
          <span>课程类型: </span>
          <span onClick={all}> All</span>
          <ul>
            {subject.map(item => {
              return <li key={item.subject_id} onClick={() => btn(item.subject_id)}> {item.subject_text}</li>
            })}
          </ul>
        </div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <span>
            <h3>考试类型:</h3>
            <Form.Item
              name="testtype"
            >
              {examType.length && <Select style={{ width: 320 }} onChange={handleChange}>
                {examType.map(item => <Option value={item.exam_id} key={item.exam_name}>{item.exam_name}</Option>)}
              </Select>}
            </Form.Item>
          </span>
          <span>
            <h3>题目类型:</h3>
            <Form.Item
              name="timutype"
            >
              {questionsType.length && <Select style={{ width: 320 }}>
                {questionsType.map(item => <Option value={item.questions_type_id} key={item.questions_type_text}>{item.questions_type_text}</Option>)}
              </Select>}
            </Form.Item>
            <Form.Item
              name="submit"
            >
              <p><Button type="primary" htmlType="submit" className="login-form-button">查询</Button></p>
            </Form.Item>
          </span>
        </Form>
      </div>
      <div className={styles.looktestbox}>
        <div className={styles.looktestlistbox}>
          {
            getquestions.map((item: any) => {
              return <div className={styles.itemsbox} key={Math.random().toString(16).substr(2, 6)}>
                <p>{item.title}  <b style={{ color: '#4395FF' }} onClick={()=>{
                  history.push({
                    pathname: '/main/edittest',
                    state:{
                      data: item
                    }
                  })
                }}>编辑</b>  </p>
                <p>
                  <span>{item.questions_type_text}</span>
                  <span>{item.subject_text}</span>
                  <span>{item.exam_name}</span>
                </p>
                <p style={{ color: 'rgb(29, 145, 223)' }}>{item.user_name} 发布</p>
              </div>
            })
          }
        </div>
      </div>
    </div>
  );
}
export default Looktest
